<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
	<!--通用的header-->
	<jsp:include page="/views/includes/base_header.jsp">
		<jsp:param value="商品类别管理" name="title"/>
	</jsp:include>
	
	<body>
		<!--导航条-->
		<jsp:include page="/views/includes/top_navbar.jsp"></jsp:include>
		
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-2">
					<!--菜单栏-->		
					<jsp:include page="/views/includes/left_menu.jsp">
						<jsp:param value="dept_manage" name="active"/>
					</jsp:include>
				</div>
				<div class="col-md-10">
					<!-- 搜索和分页表单 -->
					<div class="panel panel-info">
						<div class="panel-heading">
							商品类别搜索分页表单
						</div>
						<!-- 搜索参数表单 -->
						<div class="panel-body">
							<form id="searchForm" action="${pageContext.request.contextPath}/litemallCategory/findListCusTypeByCondition">
								<div class="row" style="margin-top: 5px;">
											<label style="margin-top: 8px;" for="name" class="col-sm-2 control-label text-center">${fn:substring("类目名称", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="name"  type="text" class="form-control" placeholder="请输入（类目名称）">
											</div>
											<label style="margin-top: 8px;" for="descInfo" class="col-sm-2 control-label text-center">${fn:substring("类目广告语介绍", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="descInfo"  type="text" class="form-control" placeholder="请输入（类目广告语介绍）">
											</div>
											<label style="margin-top: 8px;" for="type" class="col-sm-2 control-label text-center">${fn:substring("分类的类型（1平台特卖，2商家自营）", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="type"  type="text" class="form-control" placeholder="请输入（分类的类型（1平台特卖，2商家自营））">
											</div>
											<label style="margin-top: 8px;" for="shopId" class="col-sm-2 control-label text-center">${fn:substring("门店id", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="shopId"  type="text" class="form-control" placeholder="请输入（门店id）">
											</div>
											<label style="margin-top: 8px;" for="iconUrl" class="col-sm-2 control-label text-center">${fn:substring("类目图标", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="iconUrl"  type="text" class="form-control" placeholder="请输入（类目图标）">
											</div>
											<label style="margin-top: 8px;" for="picUrl" class="col-sm-2 control-label text-center">${fn:substring("类目图片", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="picUrl"  type="text" class="form-control" placeholder="请输入（类目图片）">
											</div>
											<label style="margin-top: 8px;" for="level" class="col-sm-2 control-label text-center">${fn:substring("", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="level"  type="text" class="form-control" placeholder="请输入（）">
											</div>
											<label style="margin-top: 8px;" for="pid" class="col-sm-2 control-label text-center">${fn:substring("父类目ID", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="pid"  type="text" class="form-control" placeholder="请输入（父类目ID）">
											</div>
											<label style="margin-top: 8px;" for="sortOrder" class="col-sm-2 control-label text-center">${fn:substring("排序", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="sortOrder"  type="text" class="form-control" placeholder="请输入（排序）">
											</div>
											<label style="margin-top: 8px;" for="deleted" class="col-sm-2 control-label text-center">${fn:substring("逻辑删除", 0, 12)}</label>
											<div class="col-sm-2">
												<input  name="deleted"  type="text" class="form-control" placeholder="请输入（逻辑删除）">
											</div>
								</div>
								
							</form>
						</div>
						<!-- 分页列表 -->
						<div class="panel-footer" style="height: 65px">
						  	<div class="row">
						  		<div class="col-sm-6 text-right">
						  			<nav >
										<ul id="pageBtn" class="pagination pagination-lg" style="margin-top: 0px;margin-left: 10px">
									      	<c:if test="${pageInfo.hasPreviousPage==true }">
									      		<li pageNum="${pageInfo.prePage }" ><a href="javascript:void(0)" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
									      	</c:if>
									        <c:forEach items="${pageInfo.navigatepageNums }" var="curPage">
									        	<c:choose>
									        		<c:when test="${curPage==pageInfo.pageNum }">
									        			<li pageNum="${curPage}" class="active"><a href="javascript:void(0)">${curPage }</a></li>
									        		</c:when>
									        		<c:otherwise>
									        			<li pageNum="${curPage}" ><a href="javascript:void(0)">${curPage }</a></li>
									        		</c:otherwise>
									        	</c:choose>
									        </c:forEach>
									        <c:if test="${pageInfo.hasNextPage==true }">
									      		<li pageNum="${pageInfo.nextPage }" ><a href="javascript:void(0)" aria-label="Next"><span aria-hidden="true">»</span></a></li>
									      	</c:if>
									     </ul>
								   </nav>
						  		</div>
						  		<div class="col-sm-2 text-left" style="margin-top: 10px;">
						  			总记录数:${pageInfo.total }总页数:${pageInfo.pages }
						  		</div>
						  		<div class="col-sm-1 text-left">
						  			<input id="searchBtn" style="margin-top: 5px;margin-left: 10px" class="btn btn-danger"  type="button" value="搜索商品类别数据">
						  		</div>
						  	</div>
						 </div>
					</div>
				
				
				
					<!-- 查询的列表 -->
					<div class="panel panel-danger">
						<div class="panel-heading">
							商品类别列表
							<a href="views/page/litemallCategory/form.jsp" class="btn btn-primary btn-sm pull-right" style="margin-top:-5px;">添加商品类别</a>
						</div>
						<!-- style="height: 800px;" -->
						<div class="panel-body table-responsive"   >
							<table id="queryListTable" class="table table-bordered text-nowrap text-center">
								<!-- 表格列=列表 -->
								<thead>
									<tr>
									<th>编号</th>
										<th>类目名称</th>
										<th>类目广告语介绍</th>
										<th>分类的类型（1平台特卖，2商家自营）</th>
										<th>门店id</th>
										<th>类目图标</th>
										<th>类目图片</th>
										<th></th>
										<th>父类目ID</th>
										<th>排序</th>
										<th>逻辑删除</th>
									 
									 <th>创建时间</th>
									 <th>修改时间</th>
									 <th>操作</th>
									</tr>
								</thead>
								<!-- 表格数据=列表 -->
								<tbody>
									<c:forEach items="${pageInfo.list }" var="litemallCategory">
										<tr>
										<td>${litemallCategory.id}</td>
										 		<td>${litemallCategory.name}</td>
										 		<td>${litemallCategory.descInfo}</td>
										 		<td>${litemallCategory.type}</td>
										 		<td>${litemallCategory.shopId}</td>
										 		<td>${litemallCategory.iconUrl}</td>
										 		<td>${litemallCategory.picUrl}</td>
										 		<td>${litemallCategory.level}</td>
										 		<td>${litemallCategory.pid}</td>
										 		<td>${litemallCategory.sortOrder}</td>
										 		<td>${litemallCategory.deleted}</td>
										<td><fmt:formatDate value="${litemallCategory.createDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
										<td><fmt:formatDate value="${litemallCategory.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
											<td>
												<a href="${pageContext.request.contextPath}/litemallCategory/goUpdate?id=${litemallCategory.id}" class="btn btn-danger btn-xs">修改</a>
												<a href="${pageContext.request.contextPath}/litemallCategory/delete?id=${litemallCategory.id}" class="btn btn-danger btn-xs">删除</a>
											</td>
											
										</tr>
									</c:forEach>
									
								</tbody>
							</table>
						</div>	
					</div>
				</div>
			</div>
		</div>
		
		<!-- 显示图片的模态框（Modal） -->
		<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" >
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"aria-hidden="true">×</button>
					</div>
					<div class="modal-body" style="width: 600px;height: 400px">
						<img style="width: 100%;height: 100%" alt="暂时无法显示图片" src="http://yanxuan.nosdn.127.net/36711325781ca50fdfe234489fca973e.png">
					</div>
					
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</body>
	
	<script type="text/javascript"> 
		/**
			搜索表单初始化
		*/
		function searchFormInit(){
			//设置时间样式
			Zxx.setDateTimeInput(true,true);
			//设置表单数据cookie回显
			Zxx.setInputTextOldVal('litemallCategory',"${pageContext.request.contextPath}/litemallCategory/findListCusTypeByCondition");
			//为搜索按钮，分页按钮设置点击事件
			$("#searchBtn").on('click',function(){searchData(1);});
			$("#pageBtn li").on('click',function(){searchData($(this).attr('pageNum'));});
		}
		//进行初始化
		searchFormInit();
		//进行搜索
		function searchData(pageNum){
			//获取表单数据
			var searchParams= $('#searchForm').serialize();
			searchParams+='&pageNum='+pageNum;
			//发送数据到后台进行搜索
			window.location.href='${pageContext.request.contextPath}/litemallCategory/findListCusTypeByCondition?'+searchParams;
		}
		
		//设置表格的列动态拉伸适应
		$("#queryListTable").colResizable({
	          liveDrag:true, 
	          draggingClass:"dragging", 
	          resizeMode:'overflow'
	    }); 
		
		//设置表格内容为图片的增加：鼠标移入显示图片，移除关闭图片
		function setTableImgsModal(){
			var $tableImgs= $("#queryListTable tbody td:contains('.png'),#queryListTable tbody td:contains('.jpg')");
			//<td style="cursor: pointer; "><a href="javascript:void(0);"></a></td>
			$tableImgs.each(function(){
				var $this=$(this);
				
				//设置样式
				$this.css("cursor","pointer");
				$this.html('<a href="javascript:void(0);">'+$this.text()+'</a>');
				
				//设置点击显示图片
				$this.click(function (e) {
					//获取图片地址
					var imgUrl=$(this).text();
				    //更改图片
				    $('#imageModal img').attr('src',imgUrl);
				    //显示模态框
				    $('#imageModal').modal('show');
				  });
				
			});
		}
		setTableImgsModal();
		
	
	</script>
</html>